import React from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'
import store from './redux/index.js'
import {changeInputAction,addItemAction,deleteItemAction} from './redux/action'
class TodoList extends React.Component {
    constructor(props){
        super(props)
        this.state=store.getState()
        this.changeInputValue=this.changeInputValue.bind(this)
        this.btnAdd=this.btnAdd.bind(this)
        this.storeChange=this.storeChange.bind(this)
        store.subscribe(this.storeChange)
    }
    changeInputValue(e){
        const action=changeInputAction(e.target.value)
        store.dispatch(action)
    }
    btnAdd(){
        const action=addItemAction()
        if(this.state.inputValue!==''){
            store.dispatch(action)
        }
        
        console.log("点击菜单")
    }
    storeChange(){
        this.setState(store.getState())
    }
    deleteItem(index){
        const action=deleteItemAction(index)
        store.dispatch(action)
    }
	render() {
		return (
			<div>
				<div style={{ margin: '10px', display: 'flex', justifyContent: 'space-between' }}>
                    <Input 
                        placeholder={this.state.inputValue} 
                        style={{ borderRadius: '5px' }} 
                        onChange={this.changeInputValue}
                        value={this.state.inputValue}/>
					<Button type="primary" style={{ width: '60px', height: '40px', marginLeft: '10px', borderRadius: '6px' }} onClick={this.btnAdd}>
						增加
					</Button>
				</div>
				<div style={{ margin: '10px' }}>
                    <List 
                        bordered 
                        dataSource={this.state.list} 
                        renderItem={(item,index)=> <List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>}>
                        </List>
				</div>
			</div>
		)
	}
}
export default TodoList
